<template>
  <div class="fawen"  v-loading="loading" element-loading-text="上传中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <!-- 上 -->
    <div class="header">
      <div class="headleft">
        <img class="fanhui" @click="toindex" src="../assets/fanhui.png" alt="">
        <img class="logo" @click="toindex" style="margin-left:17px;" src="../assets/logo.png" alt />
      </div>
      <div class="headzhong">
        <div class="headzhongitem" @click="tab(1)">
          <div>文章</div>
          <div v-if="tabtop==1" class="xiahuaxian"></div>
        </div>
        <div class="headzhongitem" @click="tab(5)">
          <div>小视频</div>
          <div v-if="tabtop==5" class="xiahuaxian"></div>
        </div>
        <div class="headzhongitem" @click="tab(2)">
          <div>视频</div>
          <div v-if="tabtop==2" class="xiahuaxian"></div>
        </div>
        <div class="headzhongitem" @click="tab(3)">
          <div>问答</div>
          <div v-if="tabtop==3" class="xiahuaxian"></div>
        </div>
        <div class="headzhongitem" @click="tab(4)">
          <div>投票</div>
          <div v-if="tabtop==4" class="xiahuaxian"></div>
        </div>
      </div>
      <div class="headright">
        <div v-if="tabtop!=5" class="headright-caogaoxiang" @click="tocaogaoxiang">草稿箱</div>

        <div v-if="tabtop==1" class="headright-cuncaogao" @click="fabu(2)">存草稿</div>
        <div v-if="tabtop==1" class="headright-fabu" @click="fabu(0)">发布</div>

        <!-- <div v-if="tabtop==5" class="headright-cuncaogao" @click="fabuminv(2)">存草稿</div> -->
        <div v-if="tabtop==5" class="headright-fabu" @click="fabuminv(0)">发布</div>

        <div v-if="tabtop==2" class="headright-cuncaogao" @click="fabuv(2)">存草稿</div>
        <div v-if="tabtop==2" class="headright-fabu" @click="fabuv(0)">发布</div>

        <div v-if="tabtop==3" class="headright-cuncaogao" @click="fabuwd(2)">存草稿</div>
        <div v-if="tabtop==3" class="headright-fabu" @click="fabuwd(0)">发布</div>

        <div v-if="tabtop==4" class="headright-cuncaogao" @click="fabuyoupiao(2)">存草稿</div>
        <div v-if="tabtop==4" class="headright-fabu" @click="fabuyoupiao(0)">发布</div>

        <div class="head-right-one">
          <img :src="userinfo.avatar" alt />
          <div>{{userinfo.nickname}}</div>
        </div>
        <!-- <div class="head-right-two">
          <img src="../assets/xiaoxi.png" alt="">
          <div class="redkuai"></div>
        </div>-->
        <div class="head-right-three" @click="showtuichu">
          <img src="../assets/tuichu.png" alt />
        </div>
      </div>
    </div>

    <div style="width:100%;height:48px;"></div>
    <!-- 下 -->
    <div class="content" style="font-size:14px;">

      <!-- <video id='videoPlay' src="https://ksv-video-publish.cdn.bcebos.com/ad0e5c0d85b9364a9f8b8dd945dde3e770f3df34.mp4?auth_key=1642518033-0-0-f55c534432ed3fb8553a33faa4d5cdee"></video> -->
      <!-- 文章 -->
      <div class="wenzhang" v-show="tabtop==1">
        <div class="content-left">
          <div class="content-left-tit">展示封面</div>
          <div class="danxuanradio" style="display:flex;">
            <el-radio v-model="radio" label="1">单图</el-radio>
            <el-radio v-model="radio" label="2">三图</el-radio>
            <el-radio v-model="radio" label="3">无封面</el-radio>
          </div>

          <div class="fenmiantu" v-if="radio=='1'">
            <img class="fengmianimg" v-if="wenneiurllist[0]!=undefined" :src="wenneiurllist[0]" alt />
            <input
              class="fenmianinput"
              limit="1"
              type="file"
              accept=".png, .jpg"
              @change="selectimg($event,11)"
              name
              id
            />

            <img class="upimg" src="../assets/shangchuan.png" alt />
            <div class="fenmiantudiv1">请上传封面</div>
            <div class="fenmiantudiv2">支持jpg/png格式</div>
          </div>

          <div v-if="radio=='2'" style="width:100%;">
            <div class="fenmiantu1" style=" margin-right: 10px;">
              <img class="fengmianimg" v-if="wenneiurllist[0]!=undefined" :src="wenneiurllist[0]" alt />
              <input
                class="fenmianinput"
                limit="1"
                type="file"
                accept=".png, .jpg"
                @change="selectimg($event,21)"
                name
                id
              />
              <img
                style="width:30px;height:26px;margin-top:15px;"
                src="../assets/shangchuan.png"
                alt
              />
              <div style="margin-top:10px;margin-bottom:0;" class="fenmiantudiv1">请上传封面</div>
              <div class="fenmiantudiv2">支持jpg/png格式</div>
            </div>
            <div class="fenmiantu1">
              <img class="fengmianimg" v-if="wenneiurllist[1]!=undefined" :src="wenneiurllist[1]" alt />
              <input
                class="fenmianinput"
                limit="1"
                type="file"
                accept=".png, .jpg"
                @change="selectimg($event,22)"
                name
                id
              />
              <img
                style="width:30px;height:26px;margin-top:15px;"
                src="../assets/shangchuan.png"
                alt
              />
              <div style="margin-top:10px;margin-bottom:0;" class="fenmiantudiv1">请上传封面</div>
              <div class="fenmiantudiv2">支持jpg/png格式</div>
            </div>
            <div class="fenmiantu1">
              <img class="fengmianimg" v-if="wenneiurllist[2]!=undefined" :src="wenneiurllist[2]" alt />
              <input
                class="fenmianinput"
                limit="1"
                type="file"
                accept=".png, .jpg"
                @change="selectimg($event,23)"
                name
                id
              />
              <img
                style="width:30px;height:26px;margin-top:15px;"
                src="../assets/shangchuan.png"
                alt
              />
              <div style="margin-top:10px;margin-bottom:0;" class="fenmiantudiv1">请上传封面</div>
              <div class="fenmiantudiv2">支持jpg/png格式</div>
            </div>
            <div style="clear:both;"></div>
          </div>

          <!-- <div class="shangchuanfengmian" v-if='radio=="1"'>
            上传封面
            <input class="fenmianinput" limit="1" type="file"
            accept=".png,.jpg" @change="selectimg" name id />
          </div>
          <div class="shangchuanfengmian" v-if='radio=="2"'>
            上传封面
            <input class="fenmianinput" limit="3" type="file"
            accept=".png,.jpg" multiple="multiple" @change="selectimg" name id />
          </div>-->

          <div class="content-left-tit">话题选择:</div>
          <div class="xialakaung">
            <el-select v-model="value" placeholder="请选择分类">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>



          <div class="content-left-tit">
            <span>文章描述:</span>

            <span class="zishuxz">{{synopsis.length}}-200</span>
          </div>
          <div>
            <textarea v-model="synopsis" class="shipinbiaoti" maxlength="200" placeholder="请输入文章描述"></textarea>
          </div>


        </div>
        <div class="content-right" style="font-size:16px;overflow:hidden;overflow-y: scroll;position: relative; ">
          <div class='biaotibox'>
            <input class="biaoti" type="text" maxlength="25" v-model="title" placeholder="请输入标题(最大25字)" />
          </div>

          <ckeditor :editor="editor" @ready="onReady"  v-model="editorData" :config="editorConfig"></ckeditor>

          <div style="width:880px;height:1px;"></div>
        </div>
      </div>
      <!-- 小视频 -->
      <div class="xiaoshipin" v-if="tabtop==5">
        <div class="xiaoshipin-left">
          <div class="content-left-tit">展示封面</div>
          <div class="danxuanradio">
            <el-radio v-model="xiaoshipinradio" label="1">单图</el-radio>
          </div>
          <div class="fenmiantu">
            <img class="fengmianimg" v-if="wenneiurllist[0]!=undefined" :src="wenneiurllist[0]" alt />
            <input
              class="fenmianinput"
              limit="1"
              type="file"
              accept=".png, .jpg"
              @change="selectimg($event,11)"
              name
              id
            />

            

            <img class="upimg" src="../assets/shangchuan.png" alt />
            <div class="fenmiantudiv1">请上传封面</div>
            <div class="fenmiantudiv2">支持jpg/png格式</div>
          </div>
          <!-- <div class="shangchuanfengmian">上传封面</div> -->
        </div>
        <div class="xiaoshipin-right">
          <div class="dadiv">
            <img v-if="l_video_name==''" src="../assets/shangchuanshipin.png" alt />

            <img v-if="l_video_name!=''" src="../assets/shipinwj.png" alt />

            <div class="dadivshangchuang" v-if="l_video_name==''">
              <span>
                点击上传
                <input
                  class="fenmianinput"
                  limit="1"
                  type="file"
                  accept="video/*"
                  @change="selectvideo($event,'min')"
                  name
                  id
                />

                
              </span> 视频文件
            </div>

            <div class="dadivshangchuang" v-if="l_video_name!=''">
              <span>{{l_video_name}}</span>
              <img style="width:14px;" @click="quxiao('min')" src="../assets/aaa.png" alt />
            </div>

            <div class="dadiv-box">
              <div class="dadiv-box-left">
                <div class="dadiv-box-tit">视频时长</div>
                <div class="dadiv-box-nr">视频时长不超过60s,推荐使用30s竖屏</div>
              </div>
              <div class="dadiv-box-right">
                <div class="dadiv-box-tit">推荐效果</div>
                <div class="dadiv-box-nr">无水印、高清清晰度的视频效果更佳</div>
              </div>
            </div>
          </div>
          <div class="huibox">
            <div class="huiboxleft">小视频标题:</div>
            <div class="huiboxright">{{mintitle.length}}-25</div>
          </div>
          <div class="xiaodiv">
            <textarea placeholder="请输入小视频标题" maxlength="25"   v-model="mintitle"></textarea>
          </div>
        </div>
      </div>
      <!-- 视频 -->
      <div class="shipin" v-if="tabtop==2">
        <div class="xiaoshipin-left">
          <div class="content-left-tit">展示封面</div>
          <div class="danxuanradio">
            <el-radio v-model="radio" label="1">单图</el-radio>
          </div>
          <div class="fenmiantu">
            <img class="fengmianimg" v-if="wenneiurllist[0]!=undefined" :src="wenneiurllist[0]" alt />
            <input
              class="fenmianinput"
              limit="1"
              type="file"
              accept=".png, .jpg"
              @change="selectimg($event,11)"
              name
              id
            />
            <img class="upimg" src="../assets/shangchuan.png" alt />

            <div class="fenmiantudiv1">请上传封面</div>
            <div class="fenmiantudiv2">支持jpg/png格式</div>
          </div>
          <!-- <div class="shangchuanfengmian">上传封面</div> -->
          <div class="content-left-tit">话题选择:</div>
          <div class="xialakaung">
            <el-select v-model="value" placeholder="请选择分类">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="content-left-tit">
            <span>视频标题:</span>

            <span class="zishuxz">{{maxvtitle.length}}-25</span>
          </div>
          <div>
            <textarea v-model="maxvtitle" maxlength="25" class="shipinbiaoti" placeholder="请输入视频标题"></textarea>
          </div>
        </div>
        <div class="xiaoshipin-right">
          <div class="dadiv">
            <img v-if="video_name==''" src="../assets/shangchuanshipin.png" alt />

            <img v-if="video_name!=''" src="../assets/shipinwj.png" alt />

            <div class="dadivshangchuang" v-if="video_name==''">
              <span>
                点击上传
                <input
                  class="fenmianinput"
                  limit="1"
                  type="file"
                  accept="video/*"
                  @change="selectvideo($event,'max')"
                  name
                  id
                />
              </span> 视频文件
            </div>

            <div class="dadivshangchuang" v-if="video_name!=''">
              <span>{{video_name}}</span>
              <img style="width:14px;" @click="quxiao('max')" src="../assets/aaa.png" alt />
            </div>

            <div class="shipin-dadiv-box">
              <div class="dadiv-box-tit">推荐效果</div>
              <div class="dadiv-box-nr">无水印、高清清晰度的视频效果更佳</div>
            </div>
          </div>
          <div class="huibox">
            <div class="huiboxleft">视频描述:</div>
            <div class="huiboxright">{{maxvdesc.length}}-200</div>
          </div>
          <div class="xiaodiv">
            <textarea v-model="maxvdesc" maxlength="200" placeholder="分享你此刻的心情"></textarea>
          </div>
        </div>
      </div>
      <!-- 问答 -->
      <div class="wenda" v-if="tabtop==3">
        <div class="xiaoshipin-left">
           <div style="width: 282px;height:1px;"></div>

          <div class="wendaxuanshangzhi">
            <div class="wendaxuanzexuanshangzhi">选择悬赏值</div>
            <div class="dangqianlexunbi">
              当前乐讯币：
              <span>{{lexunzhi[lexunzhiselect]}}</span>
            </div>
          </div>
          <div class="wendaxuanzekuang">
            <div
              class="wendaxuanzekuangzhi"
              v-for="(item,index) in lexunzhi"
              :class="lexunzhiselect==index?'wendalan':''"
              :key="index"
              @click="s_lexunzhiselect(index)"
            >{{item}}</div>
          </div>
          <div></div>
        </div>
        <div class="wenda-right">
          <div class="wenda-right-div">
            <textarea name="text" id='autotext' v-model="wt_title" class="wenda1" contenteditable="true" type="text" placeholder="请在这里输入问题标题"></textarea>
            <div class="huisebox">
              <p class="p1">让你的提问获得更多解答</p>
              <p class="p2">保持文字简练，标书清晰问题的关键点</p>
              <p class="p2">添加合适的话题，让问题更好地流通</p>
              <p class="p2">确保问题没有被提问过</p>
            </div>
            <!-- <input class="wenda2" type="text" placeholder="对问题补充说明，可以更快获得解答(选填)" /> -->

            <textarea name="text" id='autotext2' v-model="wt_connect" class="wenda2" contenteditable="true" type="text" placeholder="请在这里输入问题详情"></textarea>
          </div>
        </div>
      </div>
      <!-- 提交 -->
      <div class="tijiao" v-if="tabtop==4">
        <div class="xiaoshipin-left">
          <div class="content-left-tit">
           <span>投票标题:</span>

            <span class="zishuxz">{{tp_title.length}}-25</span>
            </div>
          <div>
            <textarea v-model="tp_title" maxlength="25" class="shipinbiaoti" placeholder="请输入视频标题"></textarea>
          </div>
        </div>
        <div class="tijiao-right">
          <div class="tijiao-right-box">
            <div class="tijiao-right-tit" style="margin-bottom:15px;">
              <span>投票详情:</span>

              <span class="zishuxz">{{tp_content.length}}-200</span>
            </div>
            <textarea v-model="tp_content" maxlength="200"  placeholder="在此处输入投票详情"></textarea>
            <div class="tijiao-right-tit">投票选项:</div>

            <div class="xuanxiang" v-for="(item,index) in xuanxiang" :key='index'>
              <input type="text" v-model="xuanxiang[index]"  maxlength="25"  placeholder="请输入选项(最大25字)" />
              <img @click="delxuanxiang(index)" src="../assets/yichu.png" alt />
            </div>
         

            <div class="tianjiaxuanxiang" @click="addxuanxiang">
              <div class="jia">+</div>
              <div>添加选项</div>
            </div>
          </div>
        </div>
      </div>
    </div>



     <!-- 退出弹框 -->
    <div class="tuichutc" v-if="showtuichutc == true">
      <div class="tuichubox">
        <div class="tuichuhead">
          <div>退出登录</div>
          <img  @click="quxiao_tcdl" src="../assets/guanbi.png" alt />
        </div>
        <div class="tuichuzhong">确定要退出当前登录吗？</div>
        <div class="tuichuxia">
          <div></div>
          <div class="tuichuanniu">
            <div class="quxiaoanniu" @click="quxiao_tcdl">取消</div>
            <div class="quedinganniu" @click="queding_tcdl">确定</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";

// const upload = require("../assets/js/upload");

export default {
  name: "fawen",
  data() {
    return {
      showtuichutc:false,
      title: "",
      // 富文本
      editor: ClassicEditor,
      editorData: "",

      editorConfig: {
        removePlugins: ["MediaEmbed"], //除去视频按钮
        language: "zh-cn", //中文包
        placeholder: "请输入正文",
        ckfinder: {
          // uploadUrl:"http://hlx.51appdevelop.com/media/hairs/uplode_image",
          uploaded: 1,
          url: "/"
          // 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
        },

        // extraPlugins: [upload.MyCustomUploadAdapterPlugin],

        toolbar: [
          "heading", //段落
          "|", //分隔
          "bold", //加粗
          "italic", //倾斜
          "link", //超链接
          "bulletedList", //项目列表
          "numberedList", //编号列表
          "blockQuote", //块引用
          "undo", //撤销
          "redo", //重做
          "imageStyle:full", //图片通栏显示
          "imageStyle:side", //图片侧边显示
          // "imageTextAlternative", //更换图片替换文本
          "imageUpload" //插入图像
        ] //工具栏显示
      },
      // 单选
      radio: "1",
      xiaoshipinradio: "1",
      shipinradio: "1",

      // 下拉
      options: [],

      //下拉id  分类id
      value: "",

      lexunzhi: [5, 10, 20, 50, 100, 200],
      // index 乐讯币
      lexunzhiselect: 0,

      tabtop: 1,


    

      userinfo: "",

      synopsis:"",

      //小视频
      l_video_name: "",
      l_video_file: "",
      mintitle: "",

      minfengmian:"",
      minfengmian_temp:'',

      //视频
      video_name: "",
      video_file: "",

      maxfengmian:"",
      maxfengmian_temp:'',

      maxvtitle: "",
      maxvdesc: "",

      //问题

      wt_connect:"",
      wt_title:"",

      // toupiao

      tp_title:"",
      tp_content:"",
      
      xuanxiang:["","",""],

      loading:false,

      wenneiurllist:[],
    };
  },

  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
      // this.$router.go(0)

      var toptab = this.$route.query.toptab;
      console.log(toptab);
      this.tabtop = toptab;
    }
  },
  mounted() {
     if(!localStorage.getItem('uqid')){
      this.$router.push({ path: "/login", query: {  } });
      return
    }

    this.getfenleilist();
    this.userinfo = JSON.parse(localStorage.getItem("userinfo"));
    // autotextarea

    var toptab=this.$route.query.toptab

    console.log(toptab)

    this.tabtop=toptab

    if(this.tabtop==3){
        var that=this
        that.$nextTick(function(){
          that.autoTextarea(document.getElementById('autotext'),0,200);
          that.autoTextarea(document.getElementById('autotext2'),0,100);
        })
      }

     this.findvideocover()

  },
  methods: {

    findvideocover() {
        console.log(111)
        let size = 320
        // 获取video节点
        const video = document.getElementById("videoPlay");
        console.log(video)
        video.width = size
        video.height = size
        video.currentTime = 10 // 第一帧
        //创建canvas对象
       
      },

    toindex(){
      this.$router.push({ name: "indexbox", params: {} });
         this.$store.state.mianbaoxie=['乐讯号','主页','活动']
    },
     showtuichu(){
      console.log('aaaaa')
      this.showtuichutc=true
    },
    quxiao_tcdl(){
      this.showtuichutc=false
    },
    queding_tcdl(){
      localStorage.setItem('uqid','')
      this.$router.push({ name: "login", params: {} });
    },
    s_lexunzhiselect(index) {
      this.lexunzhiselect = index;
    },
    tab(index) {
      this.tabtop = index;

      this.wenneiurllist=[]

       this.$router.push({ path: "/fawen", query: { toptab:index } });

      // this.radio = "1";
      this.value = "";
    },
    onReady(editor) {
      // Insert the toolbar before the editable area.
      editor.ui
        .getEditableElement()
        .parentElement.insertBefore(
          editor.ui.view.toolbar.element,
          editor.ui.getEditableElement()
        );
      editor.plugins.get("FileRepository").createUploadAdapter = loader => {
        //let val = editor.getData();
        return {
          upload: async () => {
            return await loader.file
              .then(f => {
                const F = new FileReader();
                F.readAsArrayBuffer(f);
                console.log(f);
                return new Promise(resolve => {
                  F.onload = function() {
                    resolve({ bufAsArray: F.result, file: f });
                  };
                });
              })
              .then(v => {
                //执行上传上传
                return this.uploadImgHook(v);

                // return {
                //     default: 'http://mmcl.maoming.gov.cn/ys/css/img/BG.png'
                // }
                //返回标准格式
                /*return {
                    default: 'http://mmcl.maoming.gov.cn/ys/css/img/BG.png'
                }*/
              });
          }
        };
      };
    },

    async uploadImgHook(v) {
      console.log(v);
      var fd = new FormData();
      fd.append("upload", v.file);
      var that = this;
      var url = "";
      await that
        .$axios({
          method: "post",
          url: "media/hairs/uplode_image",
          data: fd,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
          }
        })
        .then(response => {
          console.log(response);
          if (response.data.error == "0") {
            console.log({ default: response.data.data.url });
            url = response.data.data.url;

            this.wenneiurllist.push(url)

          } else {
            that.$message({
              showClose: true,
              message: response.data.message,
              type: "error"
            });
          }
        });

      return {
        default: url
      };
    },

    selectimg(e, index) {
      if (this.radio == "1") {
        var file = e.srcElement.files[0];
        window.console.log(file);
        // let formData = new FormData();
        // formData.append("type", 1);
        // formData.append("uploadImage", file);

        this.danfile = file;

        var _this = this;
        var reader = new FileReader();
        reader.readAsDataURL(file);
        // this.img_templist.push(reader.result)
        reader.onload = function(e) {
          _this.tempdan = e.target.result;
        };
      } else {
        if (index == 21) {
          var file = e.srcElement.files[0];
          window.console.log(file);
          this.file_21 = file;
          var _this = this;
          var reader = new FileReader();
          reader.readAsDataURL(file);
          // this.img_templist.push(reader.result)
          reader.onload = function(e) {
            _this.temp_21 = e.target.result;
          };
        }
        if (index == 22) {
          var file = e.srcElement.files[0];
          window.console.log(file);
          this.file_22 = file;
          var _this = this;
          var reader = new FileReader();
          reader.readAsDataURL(file);
          // this.img_templist.push(reader.result)
          reader.onload = function(e) {
            _this.temp_22 = e.target.result;
          };
        }
        if (index == 23) {
          var file = e.srcElement.files[0];
          window.console.log(file);
          this.file_23 = file;
          var _this = this;
          var reader = new FileReader();
          reader.readAsDataURL(file);
          // this.img_templist.push(reader.result)
          reader.onload = function(e) {
            _this.temp_23 = e.target.result;
          };
        }
      }
    },

    getfenleilist() {
      // media/hairs/plates_list

      this.$get(
        // method: "get",
        "media/hairs/plates_list",
        {
          uqid: localStorage.getItem("uqid")
        }
      ).then(response => {
        console.log(response);
        if (response.error == "0") {
          response.data.forEach(element => {
            this.options.push({
              value: element.id,
              label: element.name
            });
          });
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },

    //发布文章
    fabu(type) {
      // uqid
      // plate_id
      // title
      // content
      // is_recall (0-正常发布 2-存为草稿箱)
      // cover
      // synopsis
      if (this.value == "") {
        this.$message({
          showClose: true,
          message: "请选择分类",
          type: "error"
        });

        return;
      }
      if (this.title == "") {
        this.$message({
          showClose: true,
          message: "标题不能为空",
          type: "error"
        });
        return;
      }
      if (this.synopsis == "") {
        this.$message({
          showClose: true,
          message: "文章描述不能为空",
          type: "error"
        });
        return;
      }
      if (this.editorData == "") {
        this.$message({
          showClose: true,
          message: "正文不能为空",
          type: "error"
        });
        return;
      }
      if (this.radio == "1") {
        if (this.danfile == "") {
          this.$message({
            showClose: true,
            message: "请选择图片",
            type: "error"
          });
          return;
        }
      } else if (this.radio == "2") {
        if (!(this.file_21 != "" && this.file_22 != "" && this.file_23 != "")) {
          this.$message({
            showClose: true,
            message: "请选择图片",
            type: "error"
          });
          return;
        }
      }

      var fd = new FormData();
      fd.append("uqid", localStorage.getItem("uqid"));
      fd.append("plate_id", this.value);
      fd.append("title", this.title);
      fd.append("content", this.editorData);
      fd.append("is_recall", type);

      fd.append("synopsis", this.synopsis);

      if (this.radio == "1") {
        fd.append("cover[0]", this.danfile);
      } else if (this.radio == "2") {
        fd.append("cover[0]", this.file_21);
        fd.append("cover[1]", this.file_22);
        fd.append("cover[2]", this.file_23);
      }

      this.$axios({
        method: "post",
        url: "media/hairs/graphic_add",
        data: fd,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        if (response.data.error == "0") {
          if (type == 0) {
            this.$message({
              showClose: true,
              message: "发布成功",
              type: "success"
            });

            this.fabuchenggonghou()
          }

          if (type == 2) {
            this.$message({
              showClose: true,
              message: "已存入草稿箱",
              type: "success"
            });
            this.ccgchenggonghou()
          }
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },

    //发布小视频
    fabuminv(type) {
      // desc
      // is_recall
      // 0-正常 2-存为草稿
      // cover
      // video

      if (this.danfile == "") {
        this.$message({
          showClose: true,
          message: "请选择封面图",
          type: "error"
        });

        return;
      }
      if (this.l_video_name == "") {
        this.$message({
          showClose: true,
          message: "请选择视频",
          type: "error"
        });
        return;
      }
      if (this.mintitle == "") {
        this.$message({
          showClose: true,
          message: "标题不能为空",
          type: "error"
        });
        return;
      }

      

      this.loading=true

      var fd = new FormData();
      fd.append("uqid", localStorage.getItem("uqid"));

      fd.append("title", this.mintitle);

      // fd.append("desc", this.xinqing);
      fd.append("cover", this.danfile);
      fd.append("video", this.l_video_file);

      fd.append("is_recall", type);

      this.$axios({
        method: "post",
        url: "media/hairs/short_video_add",
        data: fd,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        this.loading=false
        if (response.data.error == "0") {
          if (type == 0) {
            this.$message({
              showClose: true,
              message: "发布成功",
              type: "success"
            });
            this.fabuchenggonghou()
          }

          if (type == 2) {
            this.$message({
              showClose: true,
              message: "已存入草稿箱",
              type: "success"
            });
            this.ccgchenggonghou()
          }
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },
    //发布视频
    fabuv(type) {
      //  maxvtitle:'',
      // maxvdesc:"",
      if (this.danfile == "") {
        this.$message({
          showClose: true,
          message: "请选择封面图",
          type: "error"
        });

        return;
      }
      if (this.video_name == "") {
        this.$message({
          showClose: true,
          message: "请选择视频",
          type: "error"
        });
        return;
      }
      if (this.maxvdesc == "") {
        this.$message({
          showClose: true,
          message: "视频描述不能为空",
          type: "error"
        });
        return;
      }
      if (this.maxvtitle == "") {
        this.$message({
          showClose: true,
          message: "视频标题不能为空",
          type: "error"
        });
        return;
      }
      if (this.value == "") {
        this.$message({
          showClose: true,
          message: "请选择分类",
          type: "error"
        });
        return;
      }
       this.loading=true
      var fd = new FormData();
      fd.append("uqid", localStorage.getItem("uqid"));

      fd.append("content", this.maxvdesc);
      fd.append("cover", this.danfile);
      fd.append("video", this.video_file);
      fd.append("title", this.maxvtitle);

      fd.append("plate_id", this.value);

      fd.append("is_recall", type);

      this.$axios({
        method: "post",
        url: "media/hairs/video_add",
        data: fd,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        this.loading=false
        if (response.data.error == "0") {
          if (type == 0) {
            this.$message({
              showClose: true,
              message: "发布成功",
              type: "success"
            });
            this.fabuchenggonghou()
          }

          if (type == 2) {
            this.$message({
              showClose: true,
              message: "已存入草稿箱",
              type: "success"
            });
            this.ccgchenggonghou()
          }
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },

    //发布问答
    fabuwd(type) {
      // uqid
      // title
      // content
      // is_recall
      // 0-正常 2-存为草稿
      // bounty_gold
      if (this.wt_title == "") {
        this.$message({
          showClose: true,
          message: "问题标题不能为空",
          type: "error"
        });
        return;
      }

      if (this.wt_connect == "") {
        this.$message({
          showClose: true,
          message: "问题内容不能为空",
          type: "error"
        });
        return;
      }

      var fd = new FormData();
      fd.append("uqid", localStorage.getItem("uqid"));

      fd.append("content", this.wt_connect);
  
      fd.append("title", this.wt_title);

      fd.append("bounty_gold", this.lexunzhi[this.lexunzhiselect]);

      fd.append("is_recall", type);

      this.$axios({
        method: "post",
        url: "media/hairs/solve_add",
        data: fd,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        if (response.data.error == "0") {
          if (type == 0) {
            this.$message({
              showClose: true,
              message: "发布成功",
              type: "success"
            });
            this.fabuchenggonghou()
          }

          if (type == 2) {
            this.$message({
              showClose: true,
              message: "已存入草稿箱",
              type: "success"
            });
            this.ccgchenggonghou()
          }
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },

    //发布投票

    fabuyoupiao(type){
      // uqid
      // title
      // desc
      // is_recall
      // 0-正常 2-存为草稿
      // option
      if (this.tp_title == "") {
        this.$message({
          showClose: true,
          message: "投票标题不能为空",
          type: "error"
        });
        return;
      }

      if (this.tp_content == "") {
        this.$message({
          showClose: true,
          message: "投票内容不能为空",
          type: "error"
        });
        return;
      }

       if (this.xuanxiang.length == 0) {
        this.$message({
          showClose: true,
          message: "选项最少两个",
          type: "error"
        });
        return;
      }

      var flag=false
      for(var i=0;i<this.xuanxiang.length;i++){
         if(this.xuanxiang[i]==''){
          flag=true
          break;
        }
      }
      if(flag){
        this.$message({
          showClose: true,
          message: "不能有空的选项内容",
          type: "error"
        });
      }


      console.log(this.xuanxiang)
      this.$axios({
        method: "post",
        url: "media/hairs/vote_add",
        data:this.$qs.stringify( {
          uqid:localStorage.getItem("uqid"),
          desc:this.tp_content,
          title:this.tp_title,
          option:this.xuanxiang,
          is_recall:type
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }).then(response => {
        console.log(response);
        if (response.data.error == "0") {
          if (type == 0) {
            this.$message({
              showClose: true,
              message: "发布成功",
              type: "success"
            });
            this.fabuchenggonghou()
          }

          if (type == 2) {
            this.$message({
              showClose: true,
              message: "已存入草稿箱",
              type: "success"
            });
            this.ccgchenggonghou()
          }
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },


    fabuchenggonghou(){
       this.$router.push({ name: "nrguanli", params: {} });
        this.$store.state.mianbaoxie=['乐讯号','内容管理','文章']
    },
     ccgchenggonghou(){
       this.$router.push({ path: "/caogaoxiang", query: { toptab:this.tabtop } });
        // this.$store.state.mianbaoxie=['乐讯号','内容管理','文章']
    },

    tocaogaoxiang() {
      this.$router.push({ path: "/caogaoxiang", query: { toptab:this.tabtop } });
    },

    selectvideo(e, type) {
      var file = e.srcElement.files[0];
      console.log(file);
      if (type == "min") {
        this.l_video_name = file.name;
        this.l_video_file = file;
      }
      if (type == "max") {
        this.video_name = file.name;
        this.video_file = file;
      }
    },
    quxiao(type) {
      if (type == "min") {
        this.l_video_name = "";
        this.l_video_file = "";
      }
      if (type == "max") {
        this.video_name = "";
        this.video_file = "";
      }
    },

    autoTextarea(elem, extra, maxHeight) {
      extra = extra || 0;
      var isFirefox = !!document.getBoxObjectFor || "mozInnerScreenX" in window,
        isOpera = !!window.opera && !!window.opera.toString().indexOf("Opera"),
        addEvent = function(type, callback) {
          elem.addEventListener
            ? elem.addEventListener(type, callback, false)
            : elem.attachEvent("on" + type, callback);
        },
        getStyle = elem.currentStyle
          ? function(name) {
              var val = elem.currentStyle[name];
              if (name === "height" && val.search(/px/i) !== 1) {
                var rect = elem.getBoundingClientRect();
                return (
                  rect.bottom -
                  rect.top -
                  parseFloat(getStyle("paddingTop")) -
                  parseFloat(getStyle("paddingBottom")) +
                  "px"
                );
              }
              return val;
            }
          : function(name) {
              return getComputedStyle(elem, null)[name];
            },
        minHeight = parseFloat(getStyle("height"));
      elem.style.resize = "both"; //如果不希望使用者可以自由的伸展textarea的高宽可以设置其他值

      var change = function() {
        var scrollTop,
          height,
          padding = 0,
          style = elem.style;

        if (elem._length === elem.value.length) return;
        elem._length = elem.value.length;

        if (!isFirefox && !isOpera) {
          padding =
            parseInt(getStyle("paddingTop")) +
            parseInt(getStyle("paddingBottom"));
        }
        scrollTop =
          document.body.scrollTop || document.documentElement.scrollTop;

        elem.style.height = minHeight + "px";
        if (elem.scrollHeight > minHeight) {
          if (maxHeight && elem.scrollHeight > maxHeight) {
            height = maxHeight - padding;
            style.overflowY = "auto";
          } else {
            height = elem.scrollHeight - padding;
            style.overflowY = "hidden";
          }
          style.height = height + extra + "px";
          scrollTop += parseInt(style.height) - elem.currHeight;
          document.body.scrollTop = scrollTop;
          document.documentElement.scrollTop = scrollTop;
          elem.currHeight = parseInt(style.height);
        }
      };

      addEvent("propertychange", change);
      addEvent("input", change);
      addEvent("focus", change);
      change();
    },

    delxuanxiang(index){

    },
    addxuanxiang(){
      this.xuanxiang.push({nr:""})
    },

    delxuanxiang(index){
      this.xuanxiang.splice(index, 1)
    },
  }
};
</script>

<style scoped>


/* <!-- 退出弹框 --> */
.tuichutc {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(51, 51, 51, 0.12);
  z-index: 999;
}
.tuichubox {
  width: 499px;
  height: 156px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 4px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 20px;
  box-sizing: border-box;
}
.tuichuhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.tuichuhead > div {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
}
.tuichuhead > img {
  width: 11px;
  height: 11px;
}
.tuichuzhong {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 14px;
}
.tuichuxia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}
.tuichuanniu {
  display: flex;
  align-items: center;
}
.quxiaoanniu {
  width: 62px;
  height: 26px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(172, 172, 172, 1);
  text-align: center;
  margin-right: 20px;
}
.quedinganniu {
  width: 62px;
  height: 26px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}


/* ############ */
.zishuxz{
  margin-right:30px;
  font-size: 10px;
  line-height:14px;
  color:rgba(172,172,172,1);
}
.fengmianimg {
 
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
   width: 100%;
  height: 100%;
  object-fit: contain; background: #eee;
}
.content-right {
  width:868px;
  position: relative;
  background-color: #fff;
  height:calc(100vh - 150px);
}
.biaoti {
  font-size: 28px;
  position: absolute;
  top: 50px;
  left: 32px;
  z-index: 10;
  width:90%;
}

.biaotibox{
  width:100%;
  height:100px;
  position: absolute;
  
  top: 48px;
  left: 0px;
  background-color: #fff;
   z-index: 10;
}
.fawen {
  font-size:14px;
  width: 100%;
  height: 100%;
  background: rgba(242, 242, 242, 1);
}
/* 上 */
.header {
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;

  position: fixed;
  top:0;
  left:0;
  z-index:100;
}
.headleft {
  display: flex;
  align-items: center;
}
.headleft .fanhui {
  width: 8px;
  height: 12px;
  margin-left: 15px;
  margin-right: 9px;
}
.headleft .logo {
  width: 89px;
  height: 30px;
}
.headzhong {
  display: flex;
  align-items: center;
  height: 48px;
  line-height: 46px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
.headzhongitem {
  width: 48px;
  height: 100%;
  font-weight: 550;
  margin-right: 41px;
  text-align: center;
}
.headzhongitem .xiahuaxian {
  width: 34px;
  height: 2px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  margin: auto;
}
.headright {
  width:492px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.headright-fabu {
  width: 70px;
  height: 28px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  margin-right: 13px;
}
.headright-caogaoxiang {
  width: 70px;
  height: 28px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(172, 172, 172, 1);
  text-align: center;
  margin-right: 24px;
}
.headright-cuncaogao {
  width: 70px;
  height: 28px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(172, 172, 172, 1);
  text-align: center;
  margin-right: 24px;
}
.head-right-one,
.head-right-three {
  display: flex;
  align-items: center;
}
.head-right-one div {
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-right: 23px;
  margin-left: 10px;
}
.head-right-two {
  position: relative;
}
.head-right-one img {
  width: 30px;
  height: 30px;
}
.head-right-two img {
  width: 20px;
  height: 18px;
}
.redkuai {
  position: absolute;
  left: 11px;
  top: -4px;
  width: 15px;
  height: 11px;
  background: rgba(255, 0, 82, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  opacity: 0.5;
  border-radius: 4px;
}
.head-right-three img {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  margin-left: 30px;
}
/* 下 */
.content {
  width: 100%;
  min-height: calc(100vh - 48px);
  background: rgba(242, 242, 242, 1);
}
/* 文章 */
.wenzhang {
  width: 100%;
  min-height: 100%;
  padding-top: 81px;
  padding-left: 146px;
  padding-right: 106px;
  padding-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.content-left {
  margin-right: 17px;
  width: 308px;
  height: 100%;
}
.content-left-tit {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 550;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 19px;
  margin-bottom: 19px;
}
.ddanxuanradio {
  font-size: 15px;
  font-weight: 550;
  line-height: 21px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;

}
.danxuanradio{
  font-size:14px;
}
.danxuanradio label {
  margin-right: 36px;
}
.fenmiantu {
  width: 282px;
  height: 210px;
  background: rgba(255, 255, 255, 1);
  border: 2px dashed rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 20px;
  margin-top: 25px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.fenmiantu1 {
  width: 45%;
  height: 105px;
  background: rgba(255, 255, 255, 1);
  border: 2px dashed rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 20px;
  margin-top: 25px;
  text-align: center;
  position: relative;
  float: left;
  overflow: hidden;
}
.fenmianinput {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 12;
}

.fenmiantu .upimg {
  margin-top: 48px;
  width: 60px;
  height: 52px;
}
.fenmiantudiv1 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(92, 92, 92, 1);
  opacity: 1;
  margin-top: 19px;
  margin-bottom: 7px;
}
.fenmiantudiv2 {
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
.shangchuanfengmian {
  width: 282px;
  height: 42px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 500px;
  font-size: 16px;
  font-weight: 400;
  line-height: 42px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  margin-top: 16px;
  margin-bottom: 20px;
  position: relative;
}
.xialakaung {
  margin-bottom: 20px;
}
.xialakaung .el-select {
  width: 282px;
}

/* 小视频 */
.xiaoshipin {
  width: 100%;
   min-height: 100%;
  padding-top: 78px;
  padding-left: 146px;
  padding-right: 106px;
  padding-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.xiaoshipin-left {
  width: 282px;
  margin-right: 26px;
}
.dadiv {
  width: 880px;
  height: 607px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 4px;
  margin: auto;
  text-align: center;
}
.dadiv > img {
  width: 124px;
  height: 125px;
  margin-top: 158px;
  margin-bottom: 38px;
}
.dadivshangchuang {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;

  /* display: flex; */
}
.dadivshangchuang span {
  color: #266aff;
  position: relative;
}
.dadiv-box {
  width: 484px;
  height: 107px;
  display: flex;
  align-items: center;
  margin: auto;
  margin-top: 40px;
}
.dadiv-box-left {
  width: 235px;
  height: 107px;
  background: rgba(247, 247, 248, 1);
  opacity: 1;
  text-align: center;
  padding: 0 24px;
  padding-top: 23px;
  box-sizing: border-box;
  margin-right: 14px;
}
.dadiv-box-right {
  width: 235px;
  height: 107px;
  background: rgba(247, 247, 248, 1);
  opacity: 1;
  text-align: center;
  padding: 0 24px;
  padding-top: 23px;
  box-sizing: border-box;
}
.dadiv-box-tit {
  font-size: 14px;
  font-weight: 550;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-bottom: 11px;
}
.dadiv-box-nr {
  font-size: 12px;
  font-weight: 300;
  line-height: 17px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
.huibox {
  width: 880px;
  height: 58px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.huiboxleft {
  font-size: 15px;
  font-weight: 550;
  line-height: 21px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
}
.huiboxright {
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
.xiaodiv {
  width: 880px;
  height: 89px;
}
.xiaodiv textarea {
  width: 880px;
  height: 89px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 6px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.xiaodiv textarea:focus {
  border: 1px solid rgba(172, 172, 172, 1);
  outline: none;
}

.shipinbiaoti {
  width: 282px;
  height: 94px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 6px;
  padding: 10px 12px;
  box-sizing: border-box;
}

.shipinbiaoti:focus {
  border: 1px solid rgba(172, 172, 172, 1);
  outline: none;
}
/* 视频 */
.shipin {
  width: 100%;
   min-height: 100%;
  padding-top: 78px;
  padding-left: 146px;
  padding-right: 106px;
  padding-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.shipin-dadiv-box {
  margin: auto;
  width: 235px;
  height: 107px;
  background: rgba(247, 247, 248, 1);
  opacity: 1;
  text-align: center;
  padding: 0 21px;
  padding-top: 23px;
  box-sizing: border-box;
  margin-top: 40px;
}
/* 问答 */
.wenda {
  width: 100%;
   min-height: 100%;
  padding-top: 78px;
  padding-left: 146px;
  padding-right: 106px;
  padding-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.wendaxuanshangzhi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}
.wendaxuanzexuanshangzhi {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: rgba(48, 49, 51, 1);
  opacity: 1;
}
.dangqianlexunbi {
  font-size: 12px;
  font-weight: 300;
  line-height: 17px;
  color: #5c5c5c;
  opacity: 1;
}
.dangqianlexunbi > span {
  color: #266aff;
}
.wendaxuanzekuang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.wendaxuanzekuangzhi {
  width: 88px;
  height: 33px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(178, 178, 178, 1);
  opacity: 1;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 300;
  line-height: 33px;
  color: rgba(178, 178, 178, 1);
  text-align: center;
  margin-bottom: 13px;
}
.wendalan {
  border: none;
  color: rgba(255, 255, 255, 1);
  background: rgba(38, 106, 255, 1);
}
.wenda-right-div {
  width: 880px;
  height: 633px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 4px;
  padding: 28px 32px;
  box-sizing: border-box;
}
.wenda-right-div .wenda1 {
  border: none;
  width: 100%;
  font-size: 16px;
  color: #266aff;
  margin-bottom: 21px;
  border: none;
}
.wenda-right-div .wenda1:focus {
  outline: none;
  border: none;
}
.wenda-right-div .wenda1::-webkit-input-placeholder {
  /* WebKit browsers 适配谷歌 */
  color: #266aff;
  font-size: 16px;
}
.wenda-right-div .wenda1:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 适配火狐 */
  color: #266aff;
  font-size: 16px;
}
.wenda-right-div .wenda1::-moz-placeholder {
  /* Mozilla Firefox 19+ 适配火狐 */
  color: #266aff;
  font-size: 16px;
}
.wenda-right-div .wenda1:-ms-input-placeholder {
  /* Internet Explorer 10+  适配ie*/
  color: #266aff;
  font-size: 16px;
}
.wenda-right-div .huisebox {
  width: 816px;
  height: 117px;
  background: rgba(247, 247, 248, 1);
  opacity: 1;
  padding-left: 12px;
  padding-top: 26px;
  box-sizing: border-box;
}
.wenda-right-div .huisebox .p1 {
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-bottom: 4px;
}
.wenda-right-div .huisebox .p2 {
  font-size: 10px;
  font-weight: 300;
  line-height: 16px;
  color: rgba(172, 172, 172, 1);
  opacity: 1;
}
.wenda-right-div .wenda2 {
  border: none;
  width: 100%;
  font-size: 14px;
  color: #acacac;
  margin-top: 39px;
}
.wenda-right-div .wenda2:focus {
  outline: none;
}
.wenda-right-div .wenda2::-webkit-input-placeholder {
  /* WebKit browsers 适配谷歌 */
  color: #acacac;
  font-size: 14px;
}
.wenda-right-div .wenda2:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 适配火狐 */
  color: #acacac;
  font-size: 14px;
}
.wenda-right-div .wenda2::-moz-placeholder {
  /* Mozilla Firefox 19+ 适配火狐 */
  color: #acacac;
  font-size: 14px;
}
.wenda-right-div .wenda2:-ms-input-placeholder {
  /* Internet Explorer 10+  适配ie*/
  color: #acacac;
  font-size: 14px;
}
/* 提交 */
.tijiao {
  width: 100%;
   min-height: 100%;
  padding-top: 78px;
  padding-left: 146px;
  padding-right: 106px;
  padding-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.tijiao-right-box {
  width: 880px;
  height: 633px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 4px;
  padding: 37px 30px;
  box-sizing: border-box;
}
.tijiao-right-tit {
  width:484px;
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.tijiao-right-box textarea {
  resize: none;
  width: 484px;
  height: 94px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  padding: 10px 13px;
  box-sizing: border-box;
  outline: none;
  margin-bottom: 24px;
  /* margin-top: 16px; */
}
.tijiao-right-box .xuanxiang {
  width: 100%;
  height: 37px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  display: flex;
  align-items: center;
  margin-top: 16px;
}
.tijiao-right-box .xuanxiang input {
  width: 484px;
  height: 37px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 6px;
  outline: none;
  padding: 10px 13px;
  box-sizing: border-box;
  margin-right: 8px;
}
.tijiao-right-box .xuanxiang img {
  width: 18px;
  height: 18px;
}
.tianjiaxuanxiang {
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(38, 106, 255, 1);
  opacity: 1;
  margin-top: 9px;
  display: flex;
  align-items: center;
}
.tianjiaxuanxiang .jia {
  margin-right: 6px;
  font-size: 20px;
}
</style>

<style>

.ck-content {
  max-height: calc(100vh - 300px);
  /* margin-top: 100px; */
  padding: 100px 30px 0 !important ;
  /* position: relative; */
  border: none !important;
  overflow: hidden;
  overflow-y: scroll;
}

.ck-focused {
  box-shadow: none !important;
}

/* ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-blurred */
*::-webkit-scrollbar {
  display: none;
}

.el-input__inner {

  border: 1px solid rgba(231, 237, 252, 1)!important;

  
}
/* .ck-toolbar{
  position: absolute;
  top:0;
  left: 0;
} */

.el-input__inner:focus {
  border: 1px solid rgba(172, 172, 172, 1) !important;
}

</style>
